<template>
  <view class="invite-page">
    <view class="invite-title">
      请选择成员备注
    </view>

    <view class="invite-list">
      <view v-for="item in userList" :key="item" class="user-item" :class="[chooseItem === item ? 'choose-item' : '']" @click="chooseItem = item">
        {{ item }}
      </view>
    </view>

    <button class="invite-btn" open-type="share" hover-class="none">
      点击邀请微信好友
    </button>
  </view>
</template>

<script lang="ts" setup>
import { getShareCode } from '@/api/my';

const chooseItem = ref('爸爸');
const userList = ref(['爸爸', '妈妈', '爷爷', '奶奶', '外公', '外婆', '哥哥', '姐姐', '弟弟', '妹妹', '其他']);

const familyCode = ref('');
const gender = ref('');
const familyName = ref('');
onLoad((option: any) => {
  familyCode.value = option.familyCode;
  familyName.value = option.familyName;
  gender.value = option.gender;
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(async () => {
  const res = await getShareCode({ familyRoleName: chooseItem.value, familyCode: familyCode.value });
  setTimeout(() => {
    uni.navigateBack();
  }, 500);
  return {
    title: '邀请你加入我的家庭组',
    imageUrl: 'https://cbandu.oss-cn-qingdao.aliyuncs.com/imgs/20250904/ysj_share.png',
    path: `/pages/views/invite/accpet?gender=${gender.value}&familyName=${familyName.value}&code=${res.code}`,
  };
});
</script>

<style lang="scss" scoped>
.invite-page {
  position: relative;
  height: 100%;
  padding: 52rpx 40rpx 120rpx 40rpx;
  background: #fff;

  .invite-title {
    font-size: 32rpx;
    color: #000000;
    line-height: 48prx;
  }

  .invite-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 56rpx;

    .user-item {
      padding: 0 56rpx;
      margin: 0 18rpx 22rpx 0;
      background: #F4F4F4;
      border-radius: 16rpx;

      font-size: 30rpx;
      color: #000000;
      line-height: 72rpx;
    }

    .choose-item {
      background: #539DF1;
      color: #fff;
    }
  }

  .invite-btn {
    position: absolute;
    bottom: 120rpx;
    left: 56rpx;

    width: 638rpx;
    height: 118rpx;
    background: linear-gradient( 90deg, rgba(246,216,108,0.98) 0%, #FFC122 100%);
    border-radius: 60rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 118rpx;
  }
}
</style>
